<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ancient Currency Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 20px auto;
            padding: 0 20px;
        }
        h1 {
            text-align: center;
        }
        .converter {
            margin-top: 20px;
            padding: 20px;
            background-color: #f2f2f2;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        label {
            font-weight: bold;
        }
        input[type="number"] {
            width: 100px;
            padding: 5px;
        }
        select {
            padding: 5px;
            width: 100%;
        }
        .result {
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Ancient Currency Converter</h1>

    <div class="converter">
        <h2>Convert from Ancient Currency to USD</h2>
        <form id="ancientToUSD">
            <label for="ancientCurrency">Select Ancient Currency:</label>
            <select id="ancientCurrency">
                <!-- Options will be dynamically generated using JavaScript -->
            </select>
            <br><br>
            <label for="ancientAmount">Amount:</label>
            <input type="number" id="ancientAmount" step="any" min="0">
            <br><br>
            <button type="button" onclick="convertToUSD()">Convert to USD</button>
            <div class="result" id="usdResult"></div>
        </form>
    </div>

    <div class="converter">
        <h2>Convert from USD to Ancient Currency</h2>
        <form id="usdToAncient">
            <label for="usdAmount">Amount in USD:</label>
            <input type="number" id="usdAmount" step="any" min="0">
            <br><br>
            <label for="ancientCurrency2">Select Ancient Currency:</label>
            <select id="ancientCurrency2">
                <!-- Options will be dynamically generated using JavaScript -->
            </select>
            <br><br>
            <button type="button" onclick="convertToAncient()">Convert to Ancient Currency</button>
            <div class="result" id="ancientResult"></div>
        </form>
    </div>

    <script>
        // Currency data (Abbreviation: {Name, Value in USD})
        const currencies = {
            'AJC': { name: 'Ajuran Currency', value: 0.06 },
            'AKC': { name: 'Aksumite Currency', value: 190.12 },
            'AMD': { name: 'Armenian Dram', value: 4.00 },
            'CAL': { name: 'Carthaginian Litra', value: 99.95 },
            'CAS': { name: 'Carthaginian Shekel', value: 6.68 },
            'CAN': { name: 'Chinese Antnose', value: 0.03 },
            'CBL': { name: 'Chinese Ban Liang', value: 0.07 },
            'CNC': { name: 'Chinese Cash Coin', value: 0.02 },
            'CNG': { name: 'Chinese Guan', value: 1.54 },
            'CKM': { name: 'Chinese Knife Money', value: 0.15 },
            'CSM': { name: 'Chinese Spade Money', value: 25.67 },
            'CNS': { name: 'Chinese Sycee', value: 1246.53 },
            'CYY': { name: 'Chinese Ying Yuan', value: 26.75 },
            'EGN': { name: 'Egyptian Nefernub', value: 640.32 },
            'ETA': { name: 'Etruscan Assarius', value: 249.81 },
            'GRD': { name: 'Greek Drachma', value: 3.98 },
            'GRS': { name: 'Greek Stater', value: 7.87 },
            'GRT': { name: 'Greek Tetradrachm', value: 15.74 },
            'ILG': { name: 'Israeli Gerah', value: 1.04 },
            'ILP': { name: 'Israeli Prutah', value: 0.02 },
            'ILS': { name: 'Israeli Shekel', value: 0.09 },
            'ILZ': { name: 'Israeli Zuz', value: 2.96 },
            'JPM': { name: 'Japanese Mon', value: 0.04 },
            'JPO': { name: 'Japanese Ōban', value: 1857.50 },
            'JPR': { name: 'Japanese Ryō', value: 185.78 },
            'JWK': { name: 'Japanese Wadōkaichin', value: 0.03 },
            'KRM': { name: 'Korean Mun', value: 0.0000014 },
            'MYP': { name: 'Malaysian Pitis', value: 0.09 },
            'NPM': { name: 'Nepalese Mohar', value: 10.69 },
            'ACB': { name: 'Cocoa Beans', value: 0.08 },
            'MAC': { name: 'Cotton', value: 0.51 },
            'MAA': { name: 'Mesoamerican Axe Money', value: 19.61 },
            'MRS': { name: 'Micronesian Rai Stone', value: 6000.00 },
            'MDC': { name: 'Mogadishu Currency', value: 0.28 },
            'IRD': { name: 'Persian Daric', value: 640.32 },
            'IRS': { name: 'Persian Sigloi', value: 4.90 },
            'PHP': { name: 'Philippine Piloncito', value: 76.05 },
            'SUC': { name: 'Sulu Coin', value: 1.38 },
            'ITA': { name: 'Roman Antoninianus', value: 0.04 },
            'IAS': { name: 'Roman Assarius', value: 2.67 },
            'IAU': { name: 'Roman Aureus', value: 608.38 },
            'ITD': { name: 'Roman Denarius', value: 4.18 },
            'IDU': { name: 'Roman Dupondius', value: 0.13 },
            'ITF': { name: 'Roman Follis', value: 0.09 },
            'ITS': { name: 'Roman Sestertius', value: 0.24 },
            'ISO': { name: 'Roman Solidus', value: 342.21 },
            'ITT': { name: 'Roman Tremissis', value: 115.59 },
            'XTS': { name: 'Tibetan Skar', value: 0.34 },
            'TYS': { name: 'Tyrian Shekel', value: 12.81 },
            'VNV': { name: 'Vietnamese Văn', value: 0.02 }
        };

        // Function to populate select options
        function populateSelectOptions(selectElementId) {
            const select = document.getElementById(selectElementId);
            for (let currency in currencies) {
                let option = document.createElement('option');
                option.value = currency;
                option.textContent = `${currency} - ${currencies[currency].name}`;
                select.appendChild(option);
            }
        }

        // Convert from ancient currency to USD
        function convertToUSD() {
            const currency = document.getElementById('ancientCurrency').value;
            const amount = parseFloat(document.getElementById('ancientAmount').value);
            const usdValue = currencies[currency].value * amount;
            document.getElementById('usdResult').textContent = `Converted Amount: $${usdValue.toFixed(2)}`;
        }

        // Convert from USD to ancient currency
        function convertToAncient() {
            const usdAmount = parseFloat(document.getElementById('usdAmount').value);
            const currency = document.getElementById('ancientCurrency2').value;
            const ancientValue = usdAmount / currencies[currency].value;
            document.getElementById('ancientResult').textContent = `Converted Amount: ${ancientValue.toFixed(2)} ${currencies[currency].name}`;
        }

        // Populate select options on page load
        document.addEventListener('DOMContentLoaded', function() {
            populateSelectOptions('ancientCurrency');
            populateSelectOptions('ancientCurrency2');
        });
    </script>
</body>
</html>
